"use client";
import { selectCategoryDescs } from "@common/api/category_action";
import { Show } from "@refinedev/antd";
import { useParsed, useShow } from "@refinedev/core";
import { Descriptions } from "antd";
import { useEffect, useState } from "react";

export default function CategoryShow() {
  const { id } = useParsed();
  const { queryResult } = useShow({ 
    resource: "project/category",
    id: id
  });
  const record = queryResult?.data?.data;
  const [descList, setDescList] = useState<any[]>([]);
  useEffect(() => {
    if (record?.alias) {
      selectCategoryDescs(record.alias).then((res:any) => {
        if (res.data) {
          setDescList(res.data);
        }
      });
    }
  }, [record?.alias]);

  return (
    <Show isLoading={queryResult?.isLoading}>
      <Descriptions column={1} bordered size="middle">
        <Descriptions.Item label="ID">{record?.id}</Descriptions.Item>
        <Descriptions.Item label="别名">{record?.alias}</Descriptions.Item>
        <Descriptions.Item label="父ID">{record?.fid}</Descriptions.Item>
        <Descriptions.Item label="排序">{record?.sort}</Descriptions.Item>
        <Descriptions.Item label="父id集合">{record?.parent}</Descriptions.Item>
        <Descriptions.Item label="状态">{record?.status}</Descriptions.Item>
      </Descriptions>
      {descList.length > 0 && (
        <div style={{marginTop: 24}}>
          <h3>多语言描述</h3>
          <Descriptions column={1} bordered size="small">
            {descList.map(desc => (
              <Descriptions.Item key={desc.id} label={desc.lang}>
                <div><b>标题：</b>{desc.title}</div>
                <div><b>关键词：</b>{desc.keyword}</div>
                <div><b>描述：</b>{desc.description}</div>
              </Descriptions.Item>
            ))}
          </Descriptions>
        </div>
      )}
    </Show>
  );
} 